<template>
  <div class="main" v-title data-title="海芯科技平台">
    <home-nav :userData="userinfo"></home-nav>
    <div class="navCenter">      
      <div class="nav-choose">
        <img src="../../assets/homePage/slogan-top2022-08.png" alt="" class="slogan-top" />
        <img src="../../assets/homePage/slogan-bottom2022-08.png" alt="" class="slogan-bottom" />
        <div class="selected-cen">
          <div class="selected-box" v-for="(item, index) in controlStripArr" :key="item.title" v-has="item.vHas">
            <a-tooltip placement="bottomLeft" autoAdjustOverflow overlayClassName="nameTooltipClass">
              <template slot="title">
                <div class="project-tab" v-if="index === 0">
                  <ul class="list">
                    <li v-for="item in projectTypes" :key="item.code" class="item" @click="handleGoProject(item.code)">
                      {{ item.name }}
                    </li>
                  </ul>
                </div>
                <span v-else>{{ item.indroduction }}</span>
              </template>
              <a-tooltip :visible="projectTooltip" v-if="index === 0" placement="topLeft" overlayClassName="new-tooltip">
                <template slot="title">
                  <span class="tooltip-title"
                    >最近两周内新立项了{{ projectNum }}个与您相关的项目</span
                  ><span class="pointed" @click="closeToolTip">X</span>
                </template>
                <a-button
                  class="selected-content"
                  @click="handleGoProject('')"
                >
                  <div>
                    <span class="flex-icon"><i class="icon"></i></span>
                    <span>{{ item.title }}</span>
                    <i>{{ item.translationTitle }}</i>
                  </div>
                </a-button>
              </a-tooltip>
              <a-button
                v-else
                class="selected-content"
                @click="handleGo(index)"
              >
                <div>
                  <span class="flex-icon"><i class="icon"></i></span>
                  <span>{{ item.title }}</span>
                  <i>{{ item.translationTitle }}</i>
                </div>
              </a-button>
            </a-tooltip>
          </div>
        </div>
        <div class="msg-box">
          <div class="hot">
            <h2><i></i>热点项目 <span @click="handleGoFile(item,1)" v-if="hotProjectList.length > 0">更多></span></h2>                        
            <ul class="file-list" >           
              <li v-for="(item, index) in hotProjectList" :key="index" @click="handleGoFile(item,1)">
                <div>
                  <div class="li-img-title">
                    <i class="new-box" v-if="checkNew(item.effectTime)">NEW</i>
                    <img src="@/assets/homepagePic2.png" alt="" v-else />
                    <p :title="item.title">{{ item ? item.title : '--' }}</p>
                  </div>
                  <div class="font-class">{{ moment(item.effectTime).format('YYYY-MM-DD') }}</div>
                </div>
              </li>
              <div class="empty" v-if="hotProjectList.length == 0">
                <a-icon type="folder" />
                <p>暂无发布信息</p>
              </div>
            </ul>
          </div>
          <div class="hte">
            <h2><i></i>海芯发布 <span @click="handleGoFile(item,2)" v-if="fileList.length > 0">更多></span></h2>
            <ul class="file-list">
              <li v-for="(item, index) in fileList" :key="index" @click="handleGoFile(item,2)">
                <div>
                  <div class="li-img-title">
                    <i class="new-box" v-if="checkNew(item.effectTime)">NEW</i>
                    <img src="@/assets/homepagePic2.png" alt="" v-else />
                    <p :title="item.fileName">{{ item ? item.fileName : '--' }}</p>
                  </div>
                  <div class="font-class">{{ item.effectTime }}</div>
                </div>
              </li>
              <div v-if="fileList.length == 0">
                <div class="empty">
                  <a-icon type="folder" />
                  <p>暂无发布信息</p>
                </div>
              </div>
            </ul>
          </div>
          <div class="rule">
            <h2><i></i>海芯制度 <span @click="handleGoFile(item,3)" v-if="systemRuleList.length > 0">更多></span></h2>
            <ul class="file-list">
              <li v-for="(item, index) in systemRuleList" :key="index" @click="handleGoFile(item,3)">
                <div>
                  <div class="li-img-title">
                    <i class="new-box" v-if="item.publishDate && checkNew(item.publishDate)">NEW</i>
                    <img src="@/assets/homepagePic2.png" alt="" v-else />
                    <p :title="item.title">{{ item ? item.institutionName : '--' }}</p>
                  </div>
                  <div class="font-class">{{ item.publishDate ? moment(item.publishDate).format('YYYY-MM-DD') : '' }}</div>
                </div>
              </li>                          
              <div class="empty" v-if="systemRuleList.length == 0">
                <a-icon type="folder" />
                <p>暂无发布信息</p>
              </div>
            </ul>
          </div>
        </div>
      </div>            
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import moment from 'moment'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { codeInfoList } from '@/api/codeInfo'
import { getAction,postAction } from '@/api/manage'
import { formatDate } from '@/utils/util'
import {filterHasPermission} from '@/utils/hasPermission'
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      controlStripArr: [
        {
          url: require('@/assets/projectMould.png'),
          title: '项目馆',
          translationTitle: 'PROJECT',
          indroduction: '海芯的科技项目立项、审批、执行、验收过程管理',
          hteUrl: '/projectBuild/myProject',
        },
        {
          url: require('@/assets/resourcesMould.png'),
          title: '海芯智库',
          translationTitle: 'RESOURCE LIBRARY',
          indroduction:
            '用于科技研发的资源查找，包括食品合规库，技术信息库，产品库，产品库包括产品标签等，半成品库，BOM查询，竞品库，科技人才库，未来还会建设更多的资源库',
          hteUrl: '/thinkTank/index',
          isNew: 1,
        },
        {
          url: require('@/assets/laboratoryMould.png'),
          title: '科技实验室',
          translationTitle: 'SCIENCE LABORATORY',
          indroduction: '实验室仪器设备的培训、持证上岗，仪器设备使用的预约，仪器设备台账管理',
          hteUrl: '/laboratory/index',
        },
        {
          url: require('@/assets/productLifeCycle.png'),
          title: '产品生命周期',
          translationTitle: 'PRODUCT LIFE CYCLE',
          indroduction: '产品生命周期',
          hteUrl: '/product',
          isNew: 1,
          vHas: 'productCycle:index',
        },
      ],
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'home',
        badgecount: '',
      },
      projectTypes: [],
      fileList: [],
      hotProjectList: [],
      systemRuleList: [],
      projectTooltip: false,
      projectNum: 0,
      homePageBigType: '',
      homePageSubType: ''
    }
  },
  created() {
    this.getClassType()
    //公司领导角色默认跳转到科技分类下    
    if (filterHasPermission('projectBuild:leaderAdmin')) {
      this.homePageBigType="Z";
      this.homePageSubType='10'
    }else{
      this.getProjectByTwoWeek()
    }
  },
  mounted() {
    
  },
  computed: {
    checkNew() {
      return function (time) {
        var createTime = time
        var myDate = new Date()
        myDate.setDate(myDate.getDate() - 10)
        myDate = new Date(formatDate(myDate.getTime(), 'yyyy-MM-dd'))
        const dateRow = new Date(createTime)
        // !row.ifSign && 未签收
        if (dateRow.getTime() > myDate.getTime()) {
          return true
        } else {
          return false
        }
      }
    },
  },
  methods: {
    moment,
    getProjectByTwoWeek() {
      getAction('/home/getProjectByTwoWeek').then((res) => {
        if (res.code == 200 && res.result) {
          this.projectNum = res.result.num || 0
          this.homePageBigType = res.result.bigTpye || ''
          if (this.projectNum) {
            this.projectTooltip = true
          }
        }
      })
    },
    handleGo(index) {
      let url = this.controlStripArr[index].hteUrl
      if (this.controlStripArr[index].isNew === 1) {
        let urlJump = this.$router.resolve({ path: url })
        window.open(urlJump.href, '_blank')
      } else {
        window.open(this.HTE_OLD_SERVER_URL + url + `?bootToken=${Vue.ls.get(ACCESS_TOKEN)}`, '_blank')
      }
    },
    handleGoProject(projectClass) {
      this.homePageBigType = projectClass ? projectClass :  this.homePageBigType 
      const newFlag = this.projectNum ? true : false
      let urlJump = this.$router.resolve({ path: `/projectpavilion?newFlag=${newFlag}&bigType=${this.homePageBigType}&subType=${this.homePageSubType}` })

      localStorage.setItem('homePageParams', projectClass)
      window.open(urlJump.href, '_blank')
    },
    handleGoFile(row,type) {
      switch (type) {
        case 1:
          if (row) {
            let urlJump = this.$router.resolve({ path: `/projectpavilion?newFlag=false&bigType=1&searchWord=`+row.projectNo })
            localStorage.setItem('homePageParams', '')
            window.open(urlJump.href, '_blank')
          } else {
            let urlJump = this.$router.resolve({ path: `/projectpavilion?newFlag=false&bigType=1` })
            localStorage.setItem('homePageParams', '')
            window.open(urlJump.href, '_blank')
          }
          break
        case 2:
          if (row) {
            let urlJump = this.$router.resolve({ path: `/library/file/view/4/${row.id}/${row.version}` })
            window.open(urlJump.href, '_blank')
          } else {
            let urlJump = this.$router.resolve({ path: `/library/index/4?type=${this.HTE_HOMEPAGE_CLASS_ID}` })
            window.open(urlJump.href, '_blank')
          }
          break
        case 3:
          if (row) {
            window.openLinkByType(JSON.stringify({
              url: row.url,
              type: ''
            }))
          } else {
            console.log(this.systemRuleList[0].moreUrl)
            console.log(encodeURI(this.systemRuleList[0].moreUrl))
            window.openLinkByType(JSON.stringify({
              url: encodeURI(this.systemRuleList[0].moreUrl),
              type: ''
            }))
            // http://10.254.2.56:8282/risk/index.html?yamitoken=$YAMITOKEN$#/institution/detail?institutionId=694&showRange=0"
          }
          break
        default:
      }
    },
    getClassType() {
      codeInfoList({ column: 'parentid', order: 'asc', pageNo: 0, pageSize: -1, isdel: false, type: '项目大类' }).then(
        (res) => {
          this.projectTypes = res.result.records
        }
      )
      getAction('/lib/hteLibFile/list', {
        current: 1,
        pageSize: 5,
        fileType: this.HTE_HOMEPAGE_CLASS_ID,
        pageNo: 1,
        classId: 4,
        signFlag: 0,
      }).then((res) => {
        if (res.code == 200 && res.result) {
          this.fileList = this.sortNewDate(res.result.records || [], 'effectTime')
        }
      })

      postAction('/home/hotProjectList', {
        pageNo: 1,
        pageSize: 5,
        column: 'build.audit_pass_date',
        order: 'desc'
      }).then((res) => {
        if (res.code == 200 && res.result) {          
          this.hotProjectList = this.sortNewDate(res.result.records || [],  'effectTime')
        }
      })

      postAction('/home/systemRuleList', {
        pageNo: 1,
        pageSize: 5,
        column: 'effectTime',
        order: 'desc'
      }).then((res) => {
        if (res.code == 200) {
          this.systemRuleList = this.sortNewDate(res.result || [], 'publishDate')
        }
      })
    },
    closeToolTip() {
      this.projectTooltip = false
    },
    /**
     * 按最新时间排序 降序
     */
    sortNewDate(list, target){
      list.sort(function(a,b){
        if(!a[target] && b[target]){
          return 1
        }
        if(a[target] && !b[target]){
          return -1
        }
        return a[target] && b[target] && moment(a[target]).diff(moment(b[target]), 'days') > 0 ? -1 : 1;
      })
      return list  
    }
  },
}
</script>
<style lang="less">
.nameTooltipClass {
  .ant-tooltip-inner {
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff !important;
    max-width: 35vw;
  }
  .ant-tooltip-arrow::before {
    background-color: #fff !important;
  }
}
.new-tooltip {
  max-width: 600px !important;
  .ant-tooltip-inner {
    // background-color: #ffb301 !important;
    background-image: linear-gradient(90deg, #54DCFF 0%, #0CA0EC 100%);
  }
  .ant-tooltip-arrow::before {
    background-color: #54DCFF !important;
  }
  .tooltip-title {
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;    
  }
  .pointed {cursor: pointer;padding-left:10px;position: relative;margin-left:10px;
    &:before{content: '';display: inline-block;position: absolute;top: 10%;left: 0;background-color: #fff;width: 1px;height: 80%;opacity: 0.8;}
  }
}
.project-tab {
  font-size: 18px;
  color: white;
  font-weight: bolder;
  .list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    li {
      position: relative;
      float: left;
      text-align: center;
      background: #fff;
      color: #595959;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: bold;
      padding: 0 12px;
      cursor: pointer;
      &:after {
        content: ' ';
        z-index: 1;
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        right: -1px;
        background: #f5f5f5;
      }
      &:last-child::after {
        display: none;
      }
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.main {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: url('../../assets/homePage/bg-homepage2022-0829.png') no-repeat 50% fixed;
  background-size: 100% 98%;
  background-position-y: 31px;
  background-color: #f7f4ee;
  position: absolute;
  font-size: 12px;
  ul {
    list-style: none;
  }
  .navCenter {
    .nav-choose {      
      margin: 75px 230px 30px;
      max-width: 1331px;
      > img {
        max-width: 634px;
        width: 50%;
        min-width: 460px;
        &.slogan-bottom{          
          display: block;
          width: 80%;
          max-width: 694px;
          margin-top: 11px;
        }
      }
      .selected-cen{
        display: flex;
        margin-top: 70px;
      }
      .selected-box {
        background-repeat: no-repeat;
        margin-right: 16px;
        flex:1;
        max-width: 320px;
        /deep/ .ant-btn {
          background-color: rgba(0, 0, 0, 0);
          border: none;
        }
        .selected-content {
          width: 100%;
          height: 100%;
          padding: 24px 0;
          border-radius: 6px;
          top: 0;
          cursor: pointer;
          transition: top .3s;box-shadow: 0 14px 24px 0 rgba(22,75,121,0.22);      
          .flex-icon{display: flex;align-items: center;justify-content: center;margin-bottom: 7px;}
          .icon{
            display: block;background-repeat: no-repeat;margin-top: 0;
          }
          span {
            font-weight: bold;
            font-size: 24px;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: 33px;
          }
          i {
            display: block;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff80;
            letter-spacing: 0;
            margin-top: 3px;
          }
          &:hover {            
            top: -5px;            
          }
        }
        .ant-btn{position: relative;
          &:before{
            content: "";
            display:inline-block;
            position: absolute;
            top:0;left:0;width: 100%;height: 100%;
            z-index: 0;
            opacity: 0.8;
          }
          >div{position:relative;z-index: 1;}
        }
        &:nth-child(1) .ant-btn{
          .icon{background-image: url('../../assets/homePage/icon-project.png');width: 36px;height:42px;}
          &:before{
            background-color: #FF596D;
          }          
        }
        &:nth-child(2) .ant-btn{
          .icon{background-image: url('../../assets/homePage/icon-resource.png');width: 40px;height:36px;}
          &:before{
            background-color: #2680FA;
          }
        }
        &:nth-child(3) .ant-btn{
          .icon{background-image: url('../../assets/homePage/icon-experiment.png');width: 41px;height:42px;background-size: 100%;}
          &:before{
            background-color: #1AC3E1;
          }
        }
        &:nth-child(4) .ant-btn{
          .icon{background-image: url('../../assets/homePage/icon-cycle.png');width: 41px;height:42px;}
          &:before{
            background-color: #30DB85;
          }
        }
        &:last-of-type{margin-right: 0}
      }
    }    
  }
}
.info-title {
  font-size: 18px;
  letter-spacing: 0px;
  color: #a7c9ff;
  position: relative;
  padding-left: 14px;
  margin-bottom: 14px;
  font-weight: bold;
  &:before {
    content: '';
    position: absolute;
    display: block;
    height: 60%;
    top: 20%;
    width: 4px;
    left: 0;
    background-color: #46b5ff;
  }
}
.msg-box {
  display: flex;margin-top:26px;justify-content: space-between;    
  padding: 23px;position: relative;min-height: 261px;
  &:before{
    content: "";
    display:inline-block;
    position: absolute;
    top:0;left:0;width: 100%;height: 100%;border-radius: 16px;
    z-index: 0;
    opacity: 0.8;
    background: #fff;
  }
  >div{
    width: 32%;
    padding: 0;
    max-width: 392px;
    margin-right: 20px;z-index: 1;position: relative;    
    &:last-of-type{margin-right: 0}    
    h2{margin-bottom:10px;font-weight: Bold;font-size: 20px;color: #275382;padding: 0 5px;
      i{width: 24px;height: 24px;display: inline-block;vertical-align: middle;background-size: 80% ;margin-right: 3px;background-repeat: no-repeat;}
      span{float: right;font-size: 13px;line-height: 27px;cursor: pointer;
        &:hover{color: #189cf0}
      }      
    }
  }
  .hot{
    h2>i{background-image: url('../../assets/homePage/hot.png');}
  }
  .hte{
    h2>i{background-image: url('../../assets/homePage/publish.png');}
  }
  .rule{
    h2>i{background-image: url('../../assets/homePage/system.png');}
  }
}
.file-list {
  margin: 0;
  padding: 0;
  li {
    cursor: pointer;
    margin-bottom: 7px;
    > div {
      transition: border 0.3s;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 1px #dbe7ea;padding: 0 5px;
    }
    &:hover {
      > div {
        border-bottom: solid 1px #189cf0;
      }
      .li-img-title p,
      .font-class {
        color: #189cf0;
      }
    }
    &:last-of-type{
      margin-bottom: 0
    }
  }
  .empty{text-align: center;color: #c3c3c3;font-size: 16px;margin-top: 80px;margin-right: 50px;
    >i{font-size: 34px}
    >p{font-size: 12px}
  }
}
.li-img-title {
  display: flex;
  align-items: center;
  width: calc(100% - 80px);
  > img {
    width: auto;
    height: 16px;
    margin-top: -9px;
  }
  p {
    font-size: 14px;
    font-weight: normal;
    color: #275382;
    display: inline-block;
    margin-left: 7px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.font-class {
  font-size: 13px;
  font-weight: normal;
  text-align: right;
  color: #1E364F;
  margin-bottom: 11px;
  min-width: 75px;
}
.new-box {
  padding: 0 2px;
  color: #fff;
  background-color: #ff5722;
  font-size: 12px;
  text-align: center;
  z-index: 1;
  border-radius: 4px;
  font-style: normal;
  position: relative;
  top: -6px;
  transform: scale(0.8);
  margin-left: -6px;
}

@media screen and (max-width: 1500px) {
  .main .navCenter {
    .selected-box .selected-content{padding: 15px 0 !important;}
    .nav-choose{
      margin:  99px 100px 30px;
    }
  }
}
@media screen and (max-width: 1200px) {
  .main .navCenter {    
    .selected-box .selected-content{padding: 10px 0 !important;
      span{font-size: 20px !important;}
      .flex-icon{margin-bottom: 0 !important;}
    }
  }
}
@media screen and (max-width: 1000px) {
  .main .navCenter {    
    .nav-choose{
      margin:  59px 30px 30px;
      .selected-cen{margin-top: 50px}
    }
  }
}
</style>